<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<cpn :number1="num1" :number2="num2" @num1change = 'num1change' @num2change = 'num2change'></cpn>
</div>
<template id="cpn">
  <div>
    <h2>props{{number1}}</h2>
    <h2>data:{{dnumber1}}</h2>
<!--    <input type="text" v-model.lazy="dnumber1">-->
    <input type="text" v-bind:value="dnumber1" @input="num1Input">
    <h2>props:{{number2}}</h2>
    <h2>data:{{dnumber2}}</h2>
<!--    <input type="text" v-model.lazy="dnumber2">-->
    <input type="text" v-bind:value="dnumber2" @input="num2Input">
  </div>
</template>
  <script src="../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el:'#app',
      data:{
        num1:1,
        num2:0
      },
      methods: {
        num1change(value){
         // this.num1 = value*2
          this.num1 = parseInt(value)//parseInt()将括号内的值转为整形
        },
        num2change(value){
          //this.num2 = value
          this.num2 = parseFloat(value)//转为浮点类型
        }
      },
      components:{
        cpn:{
          template:'#cpn',
          props:{
            number1:Number,
            number2:Number
          },
          data(){
            return{
              dnumber1:this.number1,
              dnumber2:this.number2
            }
          },
          methods:{
            num1Input(event){
              //1.将input中的value赋值到dnumber中
              this.dnumber1 = event.target.value;
              //2.为了让父组件可以修改值，发出一个事件
              this.$emit('num1change',this.dnumber1)

              //3.同时修饰dnumber2的值
              this.dnumber2 = this.dnumber1*100;
              this.$emit('num2change',this.dnumber2)
            },
            num2Input(event){
              this.dnumber2 = event.target.value;
              this.$emit('num2change',this.dnumber2)
            }
          }
        }

      }
    })
  </script>
</body>
</html>